/**
* @description: 路由器巡视详情
* @author: JiWei
* @remark:
**/
<template>
  <view class="router-details-main">
    <nav-bar class="header" back title="路由器巡视详情" @goBack="goBack" />
    <!-- 切换tab -->
    <div class="patrol-info-tab">
      <div class="info-tab-item" @click="tabChange('basicInfo')" :class="currentTab === 'basicInfo' ? ' info-tab-current': ''">基本信息</div>
      <div class="info-tab-item" @click="tabChange('businessInfo')"  :class="currentTab === 'businessInfo' ? ' info-tab-current': ''">业务信息</div>
    </div>
    <view class='main-container'>
      <!-- 基本信息 -->
      <div class="cable-info" v-if="currentTab === 'basicInfo'">
        <plateTitle title="基本信息" :isRequired="false" class="plate-title"/>
        <view class="cable-info-container">
          <van-cell-group>
            <van-cell v-for="(item,index) in taskDetail.powerDetailArr" :key="index" :title="item.title" :value="item.text"></van-cell>
          </van-cell-group>
        </view>

        <template v-if="routerInfo.serviceState!='1'">
          <plateTitle title="巡视信息" :isRequired="false" class="plate-title"/>
          <view class="patrol-info-container">
            <view>设备照片</view>
            <van-divider dashed />
            <div v-if="files.filter(item => item.img).length === 0" style="text-align: center;">暂无数据</div>
            <div v-else class="image-wrap">
              <div class="image-list">
                <div
                    class="upload-button"
                    v-for="(imgItem, index) in files"
                    v-if="imgItem.img"
                    :style="{'background-image': `url(${imgItem.bgImg})`}"
                >
                  <img v-if="imgItem.img" :src="imgItem.img" alt="" @click.stop="imageHandle(imgItem, index, 'PREVIEW')">
                </div>
              </div>
            </div>
          </view>
          <!-- 备注 -->
          <view class="remark-info-container">
            <view>备注</view>
            <van-divider dashed />
            <div class="remark-wrap">
            <textarea class="remark-text" disabled :value="textareaValue">
            </textarea>
            </div>
          </view>
        </template>

        <view class="result-info-container">
          <van-cell-group>
            <van-cell v-for="(item,index) in taskDetail.tourDetailArr" :key="index" :title="item.title" :value="item.text" :class="item.color"/>
          </van-cell-group>
        </view>
        <van-button block v-if="isEditable" @click="reEdit">重新编辑</van-button>
      </div>
      <div class="buisness-info" v-else>
        <view class="plan-info-title">
          <plateTitle title="业务信息" :isRequired="false" class="plate-title">
            <slot>
              <text class="palant-text">业务总数: {{total}}</text>
            </slot>
          </plateTitle>
          <view class="router-buinsess" v-for="(item,index) in routerList" :key="index">
            <view class="row">
              <view class="left-title">业务名称：</view>
              <view class="left-title-value">{{item.routerBuzName}}</view>
            </view>
            <view class="row">
              <view class="left-title">端口：</view>
              <view class="left-title-value">
                {{item.slotc}}-{{item.subslot}}-{{item.portName}}
                <text>({{ item.portType }})</text>
              </view>
            </view>
          </view>

          <template v-if="routeremInfo.serviceState!='1'">
            <plateTitle title="巡视信息" :isRequired="false" class="plate-title"/>
            <view class="patrol-info-container">
              <view>设备照片</view>
              <van-divider dashed />
              <div v-if="filesyw.filter(item => item.img).length === 0" style="text-align: center;">暂无数据</div>
              <div v-else class="image-wrap">
                <div class="image-list">
                  <div
                      class="upload-button"
                      v-for="(imgItem, index) in filesyw"
                      v-if="imgItem.img"
                      :key="index"
                      :style="{'background-image': `url(${imgItem.bgImg})`}"
                  >
                    <img v-if="imgItem.img" :src="imgItem.img" alt="" @click.stop="imageHandleyw(imgItem, index, 'PREVIEW')">
                  </div>
                </div>
              </div>
            </view>
            <!-- 备注 -->
            <view class="remark-info-container">
              <view>备注</view>
              <van-divider dashed />
              <div class="remark-wrap">
            <textarea class="remark-text" disabled :value="remark">
            </textarea>
              </div>
            </view>
          </template>

          <view class="result-info-container">
            <van-cell-group>
              <van-cell v-for="(item,index) in taskDetail.tourDetailArr" :key="index" :title="item.title" :value="item.text" :class="item.color"/>
            </van-cell-group>
          </view>
          <van-button block v-if="isEditableYW" @click="reEdityw">重新编辑</van-button>
        </view>
      </div>
    </view>
    <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
      <van-swipe>
        <div v-for="(image, index) in files" :key="index">
          <van-swipe-item v-if="image.img" style="text-align: center;">
            <div style="width: 100%; text-align: center;">{{ image.previewName }}</div>
            <img :src="image.img" />
          </van-swipe-item>
        </div>
      </van-swipe>
    </van-popup>
    <van-popup class="van-preview-wrap" v-model="showPreviewYw" @click="showPreviewYw = false">
      <van-swipe>
        <div v-for="(image, index) in filesyw" :key="index">
          <van-swipe-item v-if="image.img" style="text-align: center;">
            <div style="width: 100%; text-align: center;">{{ image.previewName }}</div>
            <img :src="image.img" />
          </van-swipe-item>
        </div>
      </van-swipe>
    </van-popup>
  </view>
</template>
<script>
let power_obj = {
  "routerName": "设备名称",
  "parStationIdName": "所属站点",
  "parRoomName": "所属机房",
  "parRack": "所属机柜编号",
  "parRackScreen": "所属机柜屏眉",
  "dspLevelName": "设备所属通信网等级",
  "producerIdName": "设备品牌",
  "modelnumberName": "设备型号",
  "serilanumName": "设备顺序",
  "equStatus": "设备角色",
  "picture": "实物ID",
  "moduleNum": "电源模块数量",
  "powerSupplyMode": "电源供电方式",
  "ethernetNum": "以太网口数量",
  "portNum": "2M口数量",
  "lightNum": "光口数量",
  "comboNum": "光电复用口数量",
}
let map_tour = {
  "serviceState": "巡视结果",      //设备状态（1 一致  2  不存在  3  新增   4  更新）
  "tourOperName": "巡视人", //巡视人姓名
  "tourTim": "巡视时间",   //巡视时间
}
let serviceState_map = {
  1: "一致",
  2: "不存在",
  3: "新增",
  4: "更新"
}
let serviceStateColor_map = {
  1: "blue",
  2: "red",
  3: "green",
  4: "yellow"
}
let fileTemplate = [
  {
    name: "EQUIPMENT.jpg",
    previewName: "正面照片",
    type: "EQUIPMENT",
    bgImg: require("../../../../static/img/lyqzm.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "NAMEPLATE.jpg",
    previewName: "反面照片",
    type: "NAMEPLATE",
    bgImg: require("../../../../static/img/lyqfm.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "OTHER.jpg",
    previewName: "其他照片",
    type: "OTHER",
    bgImg: require("../../../../static/img/bg_qita.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
];
import config from "../../../../common/config";
import navBar from '../../../../components/common/nav-bar'
import plateTitle from '../../../../components/business/plateTitle'
import moment from "moment";
export default {
  name: 'RouterTourDetails',
  components: {navBar,plateTitle },
  props: {},
  data() {
    return {
      baseUrl:'',
      currentTab: "basicInfo", // 当前显示内容
      taskDetail: {},
      files:fileTemplate,
      filesyw:fileTemplate,
      taskResult: '',
      textareaValue: '',
      remark: '',
      isEditable: false, // 是否可重新编辑
      isEditableYW: false, // 是否可重新编辑
      showPreview: false,
      showPreviewYw: false,
      routerInfo:{},
      routeremInfo: {},
      routerList:[],
      objId:'',
      taskSiteId:'',
      state:'',
      taskId:'',
      taskSiteName:'',
      total:''
    };
  },
  computed: {},
  watch: {},
  onLoad(option) {
    this.objId = option.objId
    this.taskSiteId = option.taskSiteId
    this.state = option.state
    this.taskId = option.taskId
    this.taskSiteName = option.taskSiteName
    if(this.currentTab === 'basicInfo') {
      this.getRouterBaseList()
    }
    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
    })
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url:  `/pages/workBench/todoTask/routerPatrol/routerPatrol?objId=${this.objId}&taskSiteId=${this.taskSiteId}&state=${this.state}&taskId=${this.taskId}&taskSiteName=${this.taskSiteName}`
      })
    },
    // 获取基本信息详情
    getRouterBaseList () {
      this.$api.queryRouter({ routerid: this.objId }).then(res => {
        this.isEditable = (res.data[0].tourOperId === this.$store.state.userData.userId && this.state !== '99'
            && (res.data[0].serviceState === 3 || res.data[0].serviceState === 4))
        if (res.data.length!=0){
          this.taskDetail = {
            originData: '',
            powerDetailArr: Object.keys(power_obj).map((item, index) => {
              return {
                title: power_obj[item],
                text: res.data[0][item]
              }
            }),
            tourDetailArr: Object.keys(map_tour).map(item => {
              let text = res.data[0][item];
              let color = serviceStateColor_map[text];
              if (item === 'serviceState') {
                text = serviceState_map[text];
              } else if (item === 'tourTim'){
                text = moment(text).format('YYYY-MM-DD HH:mm')
              }
              return {
                title: map_tour[item],
                text: text,
                color: color
              }
            }),
          };
          this.routerInfo = res.data[0]
          this.textareaValue = res.data[0].remark
          this.files = this.files.map((item) => {
            return {
              ...item,
              img: res.data[0].files[item.type] ? this.baseUrl + res.data[0].files[item.type]: '',
            }
          })

        }
      })
    },
    // 获取业务信息
    getBusinessInfo() {
      this.$api.queryRouterBuz({ routerid: this.objId }).then(res => {
        this.isEditableYW = (res.data.ROUBREM[0].tourOperId === this.$store.state.userData.userId &&
            this.state !== '99' &&
            (res.data.ROUBREM[0].serviceState == 3 || res.data.ROUBREM[0].serviceState == 4)
        )
        this.routeremInfo = res.data.ROUBREM[0]
        this.remark = res.data.ROUBREM[0].remark
        this.routerList = res.data.ROUBUZ
        this.total = res.data.TOTAL_NUMBER
        this.taskDetail = {
          originData: res.data.ROUBREM[0],
          tourDetailArr: Object.keys(map_tour).map(item => {
            let text = res.data.ROUBREM[0][item];
            let color = serviceStateColor_map[text];
            if (item === 'serviceState') {
              text = serviceState_map[text];
            }else if (item === 'tourTim'){
              text = moment(text).format('YYYY-MM-DD HH:mm')
            }
            return {
              title: map_tour[item],
              text: text,
              color: color
            }
          }),
        };
        this.filesyw = this.filesyw.map((item) => {
          return {
            ...item,
            img: res.data.files[item.type] ? this.baseUrl + res.data.files[item.type]: '',
          }
        })
      })
    },
    imageHandle(handleType) {
      if (handleType === 'PREVIEW') {
        this.showPreview = true;
      }
    },
    imageHandleyw(handleType) {
      if (handleType === 'PREVIEW') {
        this.showPreviewYw = true;
      }
    },
    tabChange(currentTab) {
      this.currentTab = currentTab;
      if (currentTab ==='businessInfo') {
        this.getBusinessInfo()
      } else {
        this.getRouterBaseList()
      }
    },
    // 基本信息重新编辑
    reEdit() {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/routerPatrol/routerInformationPerfection?type=reEdit&objId=${this.objId}&taskId=${this.taskId}&state=${this.state}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
      })
    },
    reEdityw() {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/routerPatrol/routerBusinessInformationPerfection?type=reEdit&objId=${this.objId}&taskId=${this.taskId}&state=${this.state}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
      })
    }
  }
};
</script>
<style scoped lang="scss">
.router-details-main {
  width: 100vw;
  height: 100vh;
  background: #f8f8f8;
  overflow: hidden;
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .patrol-info-tab {
    width: calc(100% - #{px2vw(60)});
    height: px2vh(120);
    border-radius: px2vw(20);
    box-sizing: border-box;
    margin: px2vh(40) px2vw(30) px2vh(37);
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .info-tab-item {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(51,51,51,1);
      font-size: px2vw(38);
      &.info-tab-current {
        height: px2vh(100);
        margin-right: px2vw(10);
        border-radius: px2vw(20);
        background-color: rgba(65,122,220,1);
        color: rgba(255,255,255,1);
        font-weight: Bold;
      }
    }
  }
  .main-container {
    height: calc(100vh - #{px2vh(400)});
    overflow: auto;
    .plate-title {
      margin-bottom: px2vh(30);
    }
    .cable-info {
      width: calc(100% - #{px2vw(60)});
      margin: auto;
      padding-bottom: px2vh(30);
      .cable-info-container {
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #FFFFFF;
        margin-bottom: px2vh(30);
      }
      .patrol-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #FFFFFF;

        /deep/.van-radio {
          margin-right: px2vw(139.5)
        }

        .image-wrap {
          width: 100%;
          display: flex;
          img {
            width: px2vw(215);
            height: px2vw(215);
            margin-right: px2vw(40);
            border-radius: px2vw(6);
          }

          .image-list {
            width: 100%;
            display: flex;
            .upload-button {
              width: px2vw(215);
              height: px2vw(215);
              background-size: cover;
              margin-right: px2vw(40);
              position: relative;
              .delete-icon {
                position: absolute;
                top: px2vw(-20);
                right: px2vw(-20);
                width: px2vw(40);
                height: px2vw(40);
                background-color: rgba(0, 0, 0, 0.7);
                border-radius: 50%;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
      .remark-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;
        margin-top: px2vh(40);
        margin-bottom: px2vh(40);
        .remark-wrap {
          background-color: #fafafa;
          padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
          border-radius: px2vw(20);
          .remark-text {
            height: px2vh(150);
          }
        }
      }
      .result-info-container {
        margin-top: px2vh(20);
        .yellow {
          /deep/.van-cell__value {
            color: #FFAD0E;
          }
        }
        .blue {
          /deep/.van-cell__value {
            color: #417ADC;
          }
        }
        .green {
          /deep/.van-cell__value {
            color: #41DC83;
          }
        }
        .red {
          /deep/ .van-cell__value {
            color: #FF4355;
          }
        }
      }
    }
    .buisness-info {
      width: calc(100% - #{px2vw(60)});
      margin: auto;
      padding-bottom: px2vh(30);
      .plan-info-title {
        width: calc(100% - #{px2vw(60)});
        margin-left: px2vw(30);
        margin-bottom: px2vh(30);
        .palant-text {
          color: #3F9EFF;
          font-size: px2vh(36);
        }
      }
      .router-buinsess {
        height: auto;
        border-radius: px2vh(20);
        background: #fff;
        margin-bottom: px2vh(20);
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: px2vh(36);
        .row {
          display: flex;
          align-items: center;
          line-height:  px2vh(80);
          .left-title {
            width: px2vw(300);
            text-align: right;
          }
          .left-title-value {
          }
        }

      }
      .patrol-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #FFFFFF;

        /deep/.van-radio {
          margin-right: px2vw(139.5)
        }

        .image-wrap {
          width: 100%;
          display: flex;
          img {
            width: px2vw(215);
            height: px2vw(215);
            margin-right: px2vw(40);
            border-radius: px2vw(6);
          }

          .image-list {
            width: 100%;
            display: flex;
            .upload-button {
              width: px2vw(215);
              height: px2vw(215);
              background-size: cover;
              margin-right: px2vw(40);
              position: relative;
              .delete-icon {
                position: absolute;
                top: px2vw(-20);
                right: px2vw(-20);
                width: px2vw(40);
                height: px2vw(40);
                background-color: rgba(0, 0, 0, 0.7);
                border-radius: 50%;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
      .remark-info-container {
        padding: px2vh(70) px2vw(50);
        font-size: px2vw(42);
        color: #666666;
        border-radius: $border-radius-base;
        overflow: hidden;
        background-color: #ffffff;
        margin-top: px2vh(40);
        margin-bottom: px2vh(40);
        .remark-wrap {
          background-color: #fafafa;
          padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
          border-radius: px2vw(20);
          .remark-text {
            height: px2vh(150);
          }
        }
      }
      .result-info-container {
        margin-top: px2vh(20);
        .yellow {
          /deep/.van-cell__value {
            color: #FFAD0E;
          }
        }
        .blue {
          /deep/.van-cell__value {
            color: #417ADC;
          }
        }
        .green {
          /deep/.van-cell__value {
            color: #41DC83;
          }
        }
        .red {
          /deep/ .van-cell__value {
            color: #FF4355;
          }
        }
      }
    }

  }
  .van-preview-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .van-swipe {
      width: 100%;
      height: 60%;
    }
    img {
      height: 90%;
    }
  }
  /deep/.van-button {
    margin-top: px2vh(30);
    height: px2vh(120);
    color: #fff;
    background-color: #417adc;
    border: 1px solid #417adc;
    border-radius: px2vh(60);
  }
}
</style>
